<%@ page language="java" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<!DOCTYPE html>
<html>
<head>
    <base href="${base}/" />
    <meta charset="utf-8" />
    <title>用户注册_嗨购商城</title>
    <link rel="stylesheet" type="text/css" href="/css/index.css" />
    <script type="text/javascript" src="js/jquery-3.7.1.min.js"></script>
    <script type="text/javascript">
        function refreshCaptcha() {
            const img = document.getElementById('captchaImg');
            img.src = '/user/captcha?t=' + new Date().getTime(); // 强制刷新验证码
        }
    </script>
</head>
<body class="second">
<div class="brand_list container_2">
    <%--header--%>
    <div class="header">
        <h1 class="logo">
            <a title="" style="background:url('images/logo.png');" href="/">电子商务平台</a>
        </h1>
    </div>
    <div class="wrapper clearfix">
        <div class="wrap_box">
            <h3 class="notice">用户注册</h3>
            <p class="tips">
                <span class="gray f_r">已有${site}帐号？请点<a class="orange bold" href="/user/login">这里</a>登录</span>
                欢迎来到我们的网站，如果您是新用户，请填写下面的表单进行注册
            </p>
            <div class="box clearfix">
                <form action='/user/register' method="post">
                    <table class="form_table f_l">
                        <col width="260px" />
                        <col />
                        <tr>
                            <th>账号：</th>
                            <td>
                                <input class="gray" name='account' id="account" type="text" value="" tabindex="1" />
                                <label id="namemsg">请填写用户名，格式为2-20个字符，可以为字母、数字、下划线和中文</label>
                                <c:if test="${param.error == 'account_exists'}">
                                    <span style="color: red;">用户名已存在，请重新输入！</span>
                                </c:if>
                            </td>
                        </tr>
                        <tr>
                            <th>设置密码：</th>
                            <td>
                                <input class="gray" type="password" name='password' tabindex="2" />
                                <label>填写登录密码，6-32个字符</label>
                            </td>
                        </tr>
                        <tr>
                            <th>确认密码：</th>
                            <td>
                                <input class="gray" type="password" name='repassword' tabindex="3" />
                                <label>重复上面所填写的密码</label>
                            </td>
                        </tr>
                        <tr>
                            <th>手机号码：</th>
                            <td>
                                <input class="gray" name='telphone' type="text" tabindex="4" />
                                <label></label>
                            </td>
                        </tr>
                        <tr>
                            <th>电子邮箱：</th>
                            <td>
                                <input class="gray" name='email' type="text" tabindex="5" />
                                <label></label>
                            </td>
                        </tr>
                        <tr>
                            <th>验证码：</th>
                            <td>
                                <input type='text'
                                       class='gray_s'
                                       name='captcha'
                                       placeholder='填写验证码'
                                       required
                                       tabindex="6" />
                                <label>填写下面图片所示的字符</label>
                                <c:if test="${param.error == 'captcha_error'}">
                                    <span style="color: red;">验证码错误，请重新输入！</span>
                                </c:if>
                            </td>
                        </tr>
                        <tr class="low">
                            <th></th>
                            <td>
                                <img src='/user/captcha'
                                     id='captchaImg'
                                     onclick="refreshCaptcha()"
                                     style="cursor: pointer;" /> <!-- 添加手型光标 -->
                                <span class="light_gray">
                    看不清？
                    <a class="link" onclick="refreshCaptcha()" style="cursor: pointer;">换一张</a>
                </span>
                            </td>
                        </tr>
                        <tr>
                            <td></td>
                            <td>
                                <input class="submit" type="submit" value="同意以下条款，提交" />
                                <label></label>
                            </td>
                        </tr>
                    </table>
                </form>
                <div class="agreement gray">
                    <!-- 协议内容 -->
                </div>
            </div>
        </div>
    </div>
    <%--footer --%>
    <div class="footer">
        <p class="links">
            <a href="">关于我们</a>|<a href="">常见问题</a>|<a href="">安全交易</a>|<a href="">购买流程</a>|<a
                href="">如何付款</a>|<a href="">联系我们</a>|<a href="">合作提案</a>
        </p>
        Copyright 蜗牛学苑© 2015-2024 <a class="copyys" target="_blank" href="">蜀ICP备01000010号</a>
    </div>
</div>
</body>
</html>